<template>
  <div class="rightbutton">
    <div class="button-box">
      <div
        class="button-item"
        v-for="(item, index) in buttonData"
        @click="click(index)"
      >
        <a
          href="javascript:void(0)"
          :title="tabIndex == 4 ? item.name : '告警点位'"
        >
          <img
            :src="item.icon"
            alt=""
            class="button-icon"
            v-if="tabIndex != 4"
          />
          <img
            src="../../assets/image/dashboard/rightbutton/全部点位.png"
            alt=""
            v-if="tabIndex == 4"
          />
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UseTab } from "@/stores/tab";
import { requireImgUrl } from "@/utils/localurl/metaUrl";
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const tab = UseTab();
const click = (index) => {
  switch (index) {
    case 0:
      if (tab.$state.Tab == 3) {
        tab.SetTab(4);
      } else if (tab.$state.Tab == 4) {
        tab.SetTab(3);
      }
      break;
  }
};
const tabIndex = computed(() => {
  return tab.$state.Tab;
});
let buttonData = ref();
watch(
  () => route.name,
  (newVal) => {
    console.log(newVal, "vv1212");

    if (newVal == "home") {
      buttonData.value = [];
    } else {
      buttonData.value = [
        {
          icon: requireImgUrl("image/dashboard/rightbutton", "告警点位"),
          name: "全部点位",
        },
      ];
    }
  },
  { immediate: true, deep: true }
);
</script>

<style scoped lang="scss">
.rightbutton {
  position: absolute;
  left: 32vw;
  bottom: 7vh;
  z-index: 3998;

  .button-item {
    margin-top: 1vh;
    cursor: pointer;

    img {
      width: clamp(3rem, 2.5vw, 6rem);
      height: clamp(3rem, 2.5vw, 6rem);
    }
  }
}
</style>
